import React, { memo } from "react";
import { NavLink } from "react-router-dom";
import { TableIntroduceStyle } from "./style";
import { getSizeImage, getYearMonthDay } from "@/utils/format-utils";

export default memo(function TableIntroduce(props) {
  return (
    <TableIntroduceStyle>
      <div className="playlist-creator-box">
        <img src={getSizeImage(props.imgUrl, 35)} alt="" />
        <NavLink
          to={{
            pathname: "/user/home",
            search: "?id=" + props.userId,
          }}
          className="creator-nickname"
        >
          {props.nickName}
        </NavLink>
        {props.imageIcon == null ? (
          <>&nbsp;&nbsp;</>
        ) : (
          <img
            style={{
              height: "13px",
              width: "13px",
              display: "inline-block",
              verticalAlign: "middle",
            }}
            src={props.imageIcon.identityIconUrl}
            alt=""
          />
        )}

        {props.pageName === "playlist" ? (
          <span className="create-time">
            {getYearMonthDay(props.createTime)}&nbsp;创建
          </span>
        ) : (
          <></>
        )}
      </div>
    </TableIntroduceStyle>
  );
});
